<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>chenkaiqi</title>
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>
<body>
<main class="itany">
    <!-- star -->
    <header id="header">
			<!-- 搜索 -->
			<div class="search">
				<div class="left" style="font-weight: 600;">
					<img src="images/sao.png">
				</div>
				<input type="text" placeholder="Python实践" style="text-align: center" />
      </div>
      
			<!-- 上导航条 -->
		</div class="clear"><div class="swiper-container" id="rnav">
				<div class="swiper-wrapper">
					<div class="swiper-slide">精选</div>
					<div class="swiper-slide">精选微课</div>
					<div class="swiper-slide">国家精品</div>
					<div class="swiper-slide">不挂科</div>
					<div class="swiper-slide">考研押题</div>
					<div class="swiper-slide">应试英语</div>
					<div class="swiper-slide">公开课</div>
					<div class="swiper-slide">计算机</div>
					<div class="swiper-slide">外语</div>
					<div class="swiper-slide">心理学</div>
				</div>
        </div>
    </header>
    <!-- end -->
    <div style="height: 100px;"></div>
      <nav id="nav">
        <div class="swiper-container " id="slide">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="images/imooc1.png"></div>
              <div class="swiper-slide"><img src="images/mooc2.png"></div>
              <div class="swiper-slide"><img src="images/mooc1.png"></div>
              <div class="swiper-slide"><img src="images/mooc2.png"></div>
              <div class="swiper-slide"><img src="images/mooc3.png"></div>
              <div class="swiper-slide"><img src="images/mooc4.png"></div>
              <div class="swiper-slide"><img src="images/mooc5.png"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
      </nav>
    <aside></aside>
    <!-- <section id="f1">
      <img src="" alt="">
    </section> -->
     <section id="f2"><!--style="background-color: #309eff;height: 68px;" -->
     <ul>
        <li><a href=""><img src="./images/grid/huangguan.png" ></a><p>国家精品</p></li>
        <li><a href=""><img src="./images/grid/jisuanji.png"  ></a><p>计算机</p></li>
        <li><a href=""><img src="./images/grid/gongwenbao.png"  ></a><p>经济管理</p></li>
        <li><a href=""><img src="./images/grid/xinlixue.png"  ></a><p>心理学</p></li>
        <li><a href=""><img src="./images/grid/allcourse.png"  ></a><p>全部课程</p></li>
        <li><a href=""><img src="./images/grid/boshimao.png"  ></a><p>21考研押题</p></li>
        <li><a href=""><img src="./images/grid/yingshiyingyu.png" ></a><p>应试英语</p></li>
        <li><a href=""><img src="./images/grid/qimobuguake.png"  ></a><p>期末不挂科</p></li>
        <li><a href=""><img src="./images/grid/jiuye.png"></a><p>考证就业</p></li>
        <li><a href=""><img src="./images/grid/xianshigongkaike.png"  ></a><p>限时公开课</p></li>
      </ul> 
    </section>
    <section id="f3"> 
    </section>
    <section id="f4">

    </section>
    <h2>合作院校</h2><span style="margin-right: 5px;">共749所高校&gt;</span>
    <section id="f5">
                <!-- Swiper 连续图像-->
  <div class="swiper-container" id="rnav">
    <div class="swiper-wrapper" >
      <div class="swiper-slide"><img id="p" src="images/prosess/1.jpg" ></div>
      <div class="swiper-slide"><img id="p" src="images/prosess/2.jpg" ></div>
      <div class="swiper-slide"><img id="p" src="images/prosess/3.jpg" ></div>
      <div class="swiper-slide"><img id="p" src="images/prosess/4.jpg" ></div>
      <div class="swiper-slide"><img id="p" src="images/prosess/5.jpg" ></div>
      <div class="swiper-slide"><img id="p" src="images/prosess/6.jpg" ></div>
      <div class="swiper-slide"><img id="p" src="images/prosess/7.jpg" ></div>
      <div class="swiper-slide"><img id="p" src="images/prosess/8.jpg" ></div>
    </div>

<div class="border"></div>
    </section>

    <footer id="footer">
        <div class="footercontainer">
          <ul>
            <li id="f"> <a href="index.html"><img src="images/home.png" alt="">
             <p>首页</p>
             </a>
             </li>
             <li id="f"><a href="mystudy.html"><img src="images/mystudy.png" alt="">
             <p>我的学习</p></a>
             </li>
            <li id="f"><a href="account.html"><img src="images/account.png" alt="">
             <p>账号</p></a>
             </li>
         </ul>
        </div>
    </footer>
</main>



<script src="js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper  上导航-->
<script>
    var swiper = new Swiper('#slide', {
      pagination: {
        el: '.swiper-pagination',
      },
    });
  var swiper = new Swiper('#rnav', {
    slidesPerView: 4,
    spaceBetween: 2, //幻灯片距离
  });
  </script>

<!-- Add Pagination 图片切换swiper  -->
    <script>
  var myswiper = new Swipe('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      loop:true,
      slidesPerView:0.8,
    },
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,

      },
  });
    </script>
<!--连续图片 可滑动 -->
<script src="js/change.js"></script>
</body>
</html>